<!DOCTYPE html>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.prime.com.tr/ui"
	xmlns:nf="http://novelfaces.be/jsf/comp"
	xmlns:nfsc="http://novelfaces.be/showcase/jsf/comp"
	xmlns:sp="http://java.sun.com/jsf/composite/source_panel">

<p>
	Your browser <span id="dragable" class="important"></span> dragging the elements below!
</p>
<div id="columns">
	<ui:repeat id="elementsRepeat" var="element" value="#{dragAndDropManagedBean.elements}">
		<nf:panel id="element" type="div"
			styleClass="column ui-corner-all ui-widget-content" 
			draggable="true"
			ondragstart="DragAndDrop.handleDragStart(this, event);"
			ondragenter="DragAndDrop.handleDragEnter(this, event);"
			ondragover="DragAndDrop.handleDragOver(this, event);"
			ondragleave="DragAndDrop.handleDragLeave(this, event);"
			ondrop="DragAndDrop.handleDrop(this, event);"
			ondragend="DragAndDrop.handleDragEnd(this, event);">
			<f:ajax render="msgs mainForm:elements" event="dragend" execute="mainForm:src mainForm:dest"
				listener="#{dragAndDropManagedBean.dragend}" />
			<header class="ui-corner-top ui-state-default">#{element}</header>
			<span>I'am #{element}</span>
		</nf:panel>
	</ui:repeat>
</div>
<h:inputHidden id="src" value="#{dragAndDropManagedBean.src}" />
<h:inputHidden id="dest" value="#{dragAndDropManagedBean.dest}" />

<div class="fieldGroup">
	<h:outputLabel value="Server side order of elements" />
	<h:outputText id="elements" value="#{dragAndDropManagedBean.elements}"/>
</div>

<script>
	jQuery(function() {
		if (DragAndDrop.isDragable('div')) {
			jQuery("#dragable").text("supports");
		} else {
			jQuery("#dragable").text("doesn't support");
		}

	});
</script>

</ui:composition>